<template>
  <div class="personnel-monitoring">
    <div class="underground-personnel">
      <div class="search-wrap">
        <HerinSelect
          v-model="selectType"
          class="herin-select"
          :options="selectOption"
          :show-optionscount="selectOption.length > 4 ? 4 : selectOption.length"
          place-holder=""
          :height="28"
          :width="130"
          @HerinSelectChange="handleSelectChange"
        />
        <div class="input-box">
          <input v-model="searchInput" type="text" placeholder="搜索..." />
          <i
            v-show="searchInput"
            class="el-icon el-icon-close"
            @click="clearInput"
          />
          <i class="el-icon el-icon-search" @click="handleSearch" />
        </div>
      </div>

      <div class="list-content">
        <div
          class="personnel-list"
          :style="{ visibility: !personnelLists.length ? 'hidden' : 'visible' }"
        >
          <div
            v-for="it in personnelLists"
            :key="it.id"
            :class="{ item: true, active: activeId === it.id }"
            @click="sendMessage(it.id)"
          >
            <div class="row">
              <div class="name-type">
                <span class="name">{{ it.name }}</span>
                <span class="tag-button" :style="{ color: color(it.status).color,'background-color': color(it.status).bgcolor }">{{ it.status }}</span>
              </div>
              <!-- <div class="long" :class="{ alarm: it.overtime }">
                {{ it.long }}
              </div> -->
            </div>
            <div class="row last">
              <div>{{ it.time }}</div>
              <div class="addr">
                <img src="@/assets/img/excavation/addr.png" />
                <span>{{ it.addr }}</span>
              </div>
            </div>
          </div>
        </div>
        <herin-tip :show-tip="!personnelLists.length" :type="showTipType" />
      </div>
    </div>
  </div>
</template>

<script>
import HerinTip from '@/components/HerinTip';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import { personList } from '../common/data';
export default {
  components: {
    HerinSelect,
    HerinTip
  },
  data() {
    return {
      showTipType: 'empty',
      searchInput: '',
      selectType: '全部工种',
      personnelList: []
    };
  },
  computed: {
    activeId() {
      return '';
    },
    selectOption() {
      const list = [
        { label: '全部工种', value: '全部工种' }
      ];
      return list;
    },
    personnelLists() {
      return this.personnelList.map(item => {
        return {
          id: item.empNo,
          name: item.cnName,
          type: item.dutyName,
          addr: item.tunnelName,
          time: item.inWellTime,
          long: item.stayWellTime,
          overtime: item.isOutTime,
          status: item.status
        };
      });
      // 1是超时，0是未超时
    },
    color() {
      return function(status) {
        const info = {};
        switch (status) {
          case '正常':
            info.color = 'rgba(19, 240, 162, 1)';
            info.bgcolor = 'rgb(8 66 69)';
            break;
          case '异常':
            info.color = 'rgba(251, 113, 85, 1)';
            info.bgcolor = 'rgb(54 41 54)';
            break;
          case '纠偏':
            info.color = 'rgba(251, 182, 85, 1)';
            info.bgcolor = 'rgb(54 54 54)';
            break;
        }
        return info;
      };
    }
  },
  mounted() {
    this.personnelList = personList;
  },
  methods: {
    sendMessage(id) {
      console.log(id);
    },

    getData() {
      const params = {
        dutyNo: this.selectType === '全部工种' ? '' : this.selectType,
        keyWord: this.searchInput
      };
      console.log(params);
      this.showTipType = 'search';
    },

    clearInput() {
      this.searchInput = '';
      this.getData();
    },

    handleSelectChange() {
      this.getData();
    },

    handleSearch() {
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
.herin-container {
  .personnel-monitoring {
    color: $light3Grey;
    // underground-personnel
    .underground-personnel {
      .personnel-title {
        display: flex;
        justify-content: space-between;
        font-size: $auxiliaryText;
        color: $light2Grey;
        height: 0.875rem;
        line-height: 0.875rem;
        .num {
          color: $lightGrey;
        }
      }
      .search-wrap {
        display: flex;
        justify-content: space-between;
        .input-box {
          width: 11.875rem;
          height: 1.75rem;
          border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
          border-radius: 0.25rem;
          position: relative;
          text-align: left;
          box-sizing: border-box;
          input {
            width: 72%;
            height: 100%;
            margin: 0 0.625rem;
            border: none;
            font-size: 0.75rem;
            color: rgba($color: $white, $alpha: 0.9);
            background-color: transparent;
            outline-width: 0rem;
          }
          input::-webkit-input-placeholder {
            font-size: 0.75rem;
            color: $secondaryTextColor;
          }
          .el-icon {
            display: inline-block;
            width: 0.875rem;
            height: 0.875rem;
            line-height: 0.875rem;
            font-size: 0.75rem;
            cursor: pointer;
            color: rgba($color: $white, $alpha: 0.5);
            position: absolute;
            top: 0.4375rem;
            &-close {
              right: 1.375rem;
            }
            &-search {
              right: 0.25rem;
              font-size: 0.75rem;
            }
          }
        }
      }
      .list-content {
        position: relative;
        .personnel-list {
          width: calc(100% + 10px);
          padding-right: 0.4375rem;
          height: 9.8125rem;
          overflow: auto;
          // margin-top: 0.625rem;
          .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 3.75rem;
            padding: 0.625rem 0.625rem 0.625rem 0;
            border-bottom: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.1);
            div {
              cursor: pointer;
            }
            &.active {
              background-color: $itemActiveBg;
            }
            &:hover {
              background-color: $itemActiveBg;
            }
            .row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: $auxiliaryText;
              height: 0.875rem;
              line-height: 0.875rem;
              .name-type {
                .name {
                  color: $light3Grey;
                  font-size: $commonContentText;
                }
                .tag-button {
                  margin-left: .3125rem;
                  display: inline-block;
                  text-align: center;
                  padding: 0 .3125rem;
                  font-size: 0.75rem;
                  height: 1rem;
                  line-height: 1rem;
                }
              }
              .long {
                color: $lightGrey;
                &.alarm {
                  color: $red;
                }
              }
              .addr {
                img {
                  width: 0.75rem;
                  height: 0.75rem;
                  margin-right: 0.25rem;
                  vertical-align: bottom;
                }
              }
              &.last {
                color: $lightGrey;
              }
            }
          }
        }
      }
    }
  }
}
</style>
